<template>
  <div class="listPage">
    <div class="fixedTop">
      <div class="searchLeft">
        <!-- <Search :searchForm="searchForm" @search="search" @resetData="resetData"></Search> -->
     <div class="search-bar">
        <el-form
      inline
      label-position="right"
      label-width="90px"
      ref="seachRef"
      :model="searchData"
    >
        <template>
            <el-form-item prop="header_license"> 
              <el-input
                v-model.trim="searchData.header_license"
                placeholder="车牌号" >
              </el-input>
            </el-form-item>
            <el-form-item prop="type">
              <el-select
              
              v-model="searchData.type"
              placeholder="选择车辆类型"
            >
              <el-option
                v-for="(option, index) in tucksType"
                :key="option.label + '' + index"
                :label="option.label"
                :value="option.value"
                :disabled="option.disabled"
              >
              </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="source"> 
              <el-select
              
              v-model="searchData.source"
              placeholder="选择来源"
            >
              <el-option
                v-for="(option, index) in source_vo"
                :key="option.label + '' + index"
                :label="option.label"
                :value="option.value"
                :disabled="option.disabled"
              >
              </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="status">
              <el-select
              
              v-model="searchData.status"
              placeholder="选择状态"
            >
              <el-option
                v-for="(option, index) in status_vo"
                :key="option.label + '' + index"
                :label="option.label"
                :value="option.value"
                :disabled="option.disabled"
              >
              </el-option>
              </el-select>
            </el-form-item>
          
        </template>
        <!-- <el-col :span="6" class="search-cont"> -->
          <el-button
            class="btnAc btnSearch"
            @click="search"
            >查询</el-button
          >
        <!-- </el-col> -->
        <el-button class="btnNo btnReset" size="default" @click="resetData">重置</el-button>
        
      <!-- </el-row> -->
    </el-form>

      </div>
      </div>

       <div class="btnRight">
        <el-button class="btnAc btnAdd" type="primary" size="default"  @click="todetail">录入车辆</el-button>
      </div>
    </div>


    <div class="listTableBox">
      <el-card class="tableBox" :body-style="{ padding: '0' }">
        <Table class="tabBtn" :table_config="table_config"  v-loading="isLoading">
          <template v-slot:status="slotData">
            <span>{{slotData.data.status.description}}</span>
          </template>
          <template v-slot:operation="slotData">
            <div class="btnDiv">
              <template v-if="slotData.data.status.belong=='PRIVATE_DETAIL' && slotData.data.status.value=='NO_SUBMIT'||slotData.data.status.belong=='PRIVATE_DETAIL' && slotData.data.status.value=='APPROVE_FAIL'">
                <span class="spanBtn" @click="editInfo(slotData.data)">修改</span>
                <span class="spanBtn"  @click="submitInfo(slotData.data)">提交</span>
              </template>
              <span v-else class="spanBtn" @click="watchInfo(slotData.data)">查看</span>
            </div>
          </template>
        </Table>
        <div class="divPage">
          <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentpage.page"
          :page-sizes="[2, 5, 6, 10]"
          :page-size="currentpage.per_page"
          layout="total, sizes, prev, pager, next"
          :total="totalNum">
        </el-pagination>
      </div>
      </el-card>
    </div>

    <!-- 重新绑卡dialog -->
    <el-dialog class="dialogCom" title="重新绑卡" :visible.sync="cardDialog" width="620px" @close="closeDialog('cardRef')" > 
      <div class="dialogInfo">
        <div>
          <p><span>姓名：</span><i>张学渊</i></p>
          <p><span>身份证号：</span><i>1232254545523526</i></p>
        </div>
        <div>
          <p><span>已绑卡号：</span><i>23124569685120</i></p>
          <p><span>银行预留手机号：</span><i>13456892356</i></p>
        </div>
      </div>
      <div class="dialogFooter">
        <div>
          <el-form :model="cardData" ref="cardRef" :rules="cardRules"  label-width="122px" >
            <el-form-item label="银行卡号"  prop="cardNumber">
              <el-input v-model.trim="cardData.cardNumber" placeholder="请填写新卡卡号"></el-input>
            </el-form-item>
            <el-form-item label="银行预留手机号" prop="cardPhone">
              <el-input v-model.trim="cardData.cardPhone" placeholder="请输入新卡银行预留手机号" ></el-input>
            </el-form-item>
          </el-form>
          <div class="dialogBtn">
            <el-button class="btnNo btns" @click="cancelBind('cardRef')">取消</el-button>
            <el-button class="btnAc btns" @click="savaCard">保存</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Table from "@/components/Table.vue";
import Search from '@/components/Search.vue';
import { tucksType,energyType,trucksSellType,provinceType,licenseColor} from '@t/trucksType.js' 

export default {
  components: { Table, Search },
  data () {
    return {
      source_vo:[
        {label:'自建',value:'ONESELF'},
        {label:'共享',value:'SHARE'},
      ],
      status_vo:[
        {label:'未提交',value:'NO_SUBMIT'},
        {label:'审核中',value:'APPROVE_ING'},
        {label:'审核驳回',value:'APPROVE_FAIL'},
        {label:'已验证',value:'VERIFY_SUCCESS'},
      ],
      searchData:{
        header_license:'',
        type:'',
        status:'',
        source:'',
      },
      tucksType:tucksType,    //车辆类型
      table_config: {   //表格数据
        tableHead: [
          { label: "车辆ID", prop: "cid" },
          { label: "车牌号", prop: "header_license_vo.licence" },
          { label: "车辆类型", prop: "type_vo.value" },
          { label: "更新时间", prop: "last_modified_time" },
          { label: "来源", prop: "truck_source_vo.value"  },
          { label: "状态", prop:"status",columnType:"slot",slotName:"status"},
          { label: "操作", columnType:"slot",slotName:"operation"}
        ],
        tableData:[],
        checkbox: false, //表格复选框是否显示
      },
      totalNum:0,    //总条目
      currentpage:{
        page:1,   //当前页
        per_page:10,   //每页条数
      },

      isLoading:true,    //loading
      cardDialog:false,    //重新绑卡弹框
      searchKey:'',     //搜索data
      cardData:{      //重新绑卡data
        cardNumber:'' ,
        cardPhone:''
      },
      cardRules:{
        cardNumber:[
          { required: true, message: '请填写新卡卡号', trigger: 'blur' },
          { pattern: /^\d{8,32}$/,message: '请输入正确的银行卡号', trigger: 'blur'}
        ],
        cardPhone:[
          { required: true, message: '请输入新卡银行预留手机号', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: "请输入正确手机号", trigger: "blur"}
        ]
      }
    };
  },
  created () {
    this.getMenuList(this.currentpage);
  },
  mounted () {
    document.getElementsByClassName("el-pagination__total")[0].childNodes[0].nodeValue = "共 "+this.totalNum+' 位司机';
  },
  methods: {
    // 打开重新绑卡dialog
    bindCard(){
      this.cardDialog=true
      this.$nextTick(function(){
	      this.$refs.cardRef.resetFields();
	    })
    },
   
    // 取消绑卡
    cancelBind(refsData){
      this.$refs[refsData].resetFields();
      this.cardDialog=false

    },
    // 点击编辑信息
    editInfo(val){
      this.$store.commit('setTrucksId', val.id);
      sessionStorage.setItem('truckId',val.id)
      this.$router.push({
        name: 'trucksDetail', 
        params: { id: val.id }
      })
    },
    // 查看车辆信息
    watchInfo(val){
      this.$store.commit('setTrucksId', val.id);
      sessionStorage.setItem('truckId',val.id)
      this.$store.commit('lookType', 'trucks');
      sessionStorage.setItem('lookType','trucks')
      this.$router.push({
        name: 'trucksDetail', 
        params: { 
          id: val.id,
          type:'trucks'
        }
      })
    },
    // 保存重新绑卡数据
    savaCard(){
      this.$refs.cardRef.validate((valid) => {
        if (valid) {
          this.$message.success("保存成功")
          this.cardDialog=false
        } else {
          this.$message.warning("请正确填写信息")
        }
      });
    },
    //获取chelaingliebiao
    async getMenuList(params){
      await this.$http.companyApi.truckeList(params).then(res => {
        if(res.status == 200){
          this.isLoading=false
          console.log(res);
          console.log(res.data);
          this.table_config.tableData=res.data.result
          this.totalNum = res.data.total_num
        }
      })
    },
    // 提交车辆信息
    submitInfo(val){
      this.$http.companyApi.submitTrucks(val.id).then(res => {
        if(res.status == 200){
          this.$router.go(0);//刷新页面
          this.$message.success("提交成功")
        }
      })
      .catch(err => {
        this.$message.warning(err.data.err_msg)
      })
    },
    
    //进入详情页
    todetail(){
      sessionStorage.removeItem('truckId')
      this.$router.push({name:'trucksDetail'})
    },
    //重置搜索
    async resetData(){
      this.$refs.seachRef.resetFields();
      this.isLoading=true
      const page={
        page:1,
        per_page:10
      }
      this.getMenuList(page)

    },
    //搜索列表
    search(){
      this.isLoading=true
      this.currentpage.page=1
      const params=Object.assign(this.currentpage, this.searchData);
      console.log(params);
      this.getMenuList(params)
      
    },
    //当前页发生变化
    handleCurrentChange(val){
      this.isLoading=true
      this.currentpage.page=val
      this.getMenuList(this.currentpage)
    },
    //每页条数发生变化
    handleSizeChange(val){
      this.isLoading=true
      this.currentpage.page=1
      this.currentpage.per_page=val
      this.getMenuList(this.currentpage)
    },
  },
}

</script>

<style scoped>
.btnAdd{
  width: 104px;
}
.listTableBox{
  margin-top: 88px;
  padding:24px;
}
/* 绑定银行卡信息 */
.dialogInfo{
  padding: 0 24px;
}
.dialogInfo p{
  height: 32px;
  line-height: 32px;
}
.dialogInfo p span{
  color: #9AA1B5;
} 
.dialogInfo p i{
  color: #171717;
} 

.dialogInfo div{
  padding: 10px 0;
}
.dialogInfo div:first-of-type{
  border-bottom: 1px solid #F0F1F5;
}
.dialogFooter{
  background: rgba(141, 180, 244, 0.09);
  padding: 18px 24px;
  border-top: 1px solid #DCEAFE;
  }
.btns{
  width: 76px;
}
.dialogBtn{
  text-align: end;
}
</style>